<template>
  <div class="unlock_warp_com">
    <div class="unlock_warp1" @click="closeUnlockCom" />
    <div class="trend_unlock_warp">
      <div v-show="unlockType===0" class="unlock_title">解锁全部价格走势</div>
      <div v-show="unlockType===1" class="unlock_title">解锁行政区排名</div>
      <div v-show="unlockType===2" class="unlock_title">解锁热度榜单</div>
      <div class="unlock_current_need">需要{{ needBingBiNum }}冰币</div>
      <div class="unlock_desc">解锁后一年内免费查询</div>
      <div class="unlock_no_money">
        <span v-show="!hasEnough" class="un_no_l">余额不足，请充值</span>
        <span v-show="hasEnough" class="un_no_l">冰币充足，请确认解锁</span>
        <span class="un_no_r">
          <span>当前余额：</span>
          <span class="un_no_r_money">{{ surplusMoney || 0 }}</span>
          <span>&nbsp;冰币</span>
        </span>
      </div>
      <div v-show="!hasEnough">
        <div class="trend_unlock_warp2">
          <ul class="trend_unlock_ul">
            <li
              v-for="itemRecharge in rechargeList"
              :key="itemRecharge.id"
              :class="{rechargeActive: defaultIndex === itemRecharge.id}"
              class="trend_unlock_li"
              @click="selectRechargeMoney(itemRecharge.id,itemRecharge.money1)"
            >
              <div class="recharge_money">充 <span class="recharge_money_count">{{ itemRecharge.money1 }}</span>元</div>
              <div class="recharge_money_desc">{{ itemRecharge.money2 }}冰币</div>
            </li>
          </ul>
          <div class="input_recharge_money_warp">
            <van-field
              v-model="inputValueMoney"
              maxlength="6"
              type="number"
              placeholder="请输入充值金额"
              @input="moneyNum"
            />
          </div>
          <div class="recharge_warp"> <span>充值金额：</span> <span>{{ rechargeMoney }}元</span></div>
          <div class="make_sure_recharge" @click="createPayInfo">确认充值</div>
          <div class="recharge_agree">充值即代表同意 <span class="recharge_agree_page">《充值协议》</span> </div>
          <div class="trend_unlock_warp3">
            <div v-for="(itemDesc,indexDesc) in descList" :key="indexDesc" class="trend_unlock_desc">
              <van-icon name="info-o" />{{ itemDesc.content }}</div>
          </div>
        </div>
      </div>

      <div v-show="hasEnough">
        <div class="fast_unlock" @click="fastUnlock">立即解锁</div>
      </div>

    </div>

  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import axios from 'axios'
import Qs from 'qs'
export default {
  name: 'UnlockCom',
  components: {},
  props: {
    hasEnough: { // 冰币是否足够
      type: Boolean,
      default: false,
    },
    needBingBiNum: { // 解锁需要的冰币数量
      type: Number,
      default: 10,
    },
    unlockType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      inputValueMoney: undefined,
      defaultIndex: -1, // 默认显示的金额
      rechargeMoney: undefined, // 充值的金额
      surplusMoney: undefined, // 剩余的钱
      rechargeList: [
        { id: 0, money1: 10, money2: 10 },
        { id: 1, money1: 50, money2: 10 },
        { id: 2, money1: 80, money2: 10 },
        { id: 3, money1: 100, money2: 10 },
      ], // 金额列表
      descList: [
        { content: '虚拟商品购买后不可退换，1冰币=1元，冰币有效期1年，过期自动时效，消费时优先扣除距离过期时间最近的冰币。' },
        { content: '包年vip特权可在购买之后的一年里免费查询所有城市、行政区、片区、小区。' },
        { content: '终身版vip特权可在购买之后终身享受免费查询所有城市、行政区、片区、小区、学校数据。' },
      ], // 描述的数据，实际上应该是富文本
    }
  },
  computed: {},
  create() {
  },
  mounted() {
    this.initPayConfig()
  },
  methods: {
  /** 输入不同的充值金额的监听 **/
    moneyNum(value) {
      this.rechargeMoney = value
    },
    closeUnlockCom() {
      this.$emit('closeUnlock')
    },
    /** 选择充值金额 **/
    selectRechargeMoney(id, money) {
      this.defaultIndex = id
      this.rechargeMoney = money
    },
    /** 初始化充值**/
    initPayConfig() {
      const param = {
        url: window.location.href,
      }
      axios.post('/weChat/getPayConfig', Qs.stringify(param)).then(function(response) {
        if (response.data.code === 200) {
          var data = response.data.data
          wx.config({
            debug: false,
            appId: data.appid,
            timestamp: data.timestamp,
            nonceStr: data.noncestr,
            signature: data.signature,
            jsApiList: ['chooseWXPay'],
          })
          wx.ready(function(aa) {
            wx.checkJsApi({
              jsApiList: ['chooseWXPay'],
              success: function(res) {
              },
              fail: function(res) {
              },
            })
          })
        }
      })
    },
    /** 立即支付**/
    createPayInfo(id) {
      if (this.rechargeMoney === undefined) {
        this.$toast('请选择充值金额')
        return
      }
      if (this.rechargeMoney <= 0) {
        this.$toast('充值金额不能小于0~')
        return
      }
      const param = {
        token: sessionStorage.getItem('token'),
        payAmount: this.rechargeMoney,
      }
      axios.post('/createPayInfo', Qs.stringify(param)).then(function(response) {
        if (response.data.code === 200) {
          var data = response.data.data
          wx.ready(function() {
            wx.chooseWXPay({
              appId: data.appId,
              timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: data.nonceStr, // 支付签名随机串，不长于 32
              package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: data.paySign, // 支付签名
              success: function(res) {
                this.$toast('订单创建成功')
              },
              cancel: function(res) {
                this.$toast('订单取消')
              },
              fail: function(res) {
                this.$toast('订单创建失败')
              },
            })
          })
        }
      })
    },
    /** 如果金币充足，点击立即解锁**/
    fastUnlock() {
      this.$emit('fastUnlock')
    },
  },

  /** 关闭当前的弹窗 **/

}
</script>

<style scoped lang="scss">
@import "../assets/style/base";
  .unlock_warp_com{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .unlock_warp1{
      flex: 1;
    }
    .trend_unlock_warp {
      height: 85vh;
      background-color: #f0f0f0;
      overflow: auto;
      .unlock_title{
        margin: pxTorem(60px) auto pxTorem(20px) auto;
        font-size: pxTorem(34px);
        color: #666666;
        text-align: center;
      }
      .unlock_current_need{
        font-size: pxTorem(28px);
        color: #e98f36;
        text-align: center;
        margin: pxTorem(0px) auto;
      }
      .unlock_desc{
        font-size: pxTorem(32px);
        text-align: center;
        color: #666666;
        margin: pxTorem(10px) auto pxTorem(20px) auto;
      }
      .unlock_no_money{
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        font-size: pxTorem(32px);
        .un_no_r_money{
          color: #e98f36;
        }
      }
      .trend_unlock_warp2 {
        padding: pxTorem(0px) pxTorem(30px);

        .trend_unlock_ul {
          display: flex;
          padding: pxTorem(30px) pxTorem(40px) 0 pxTorem(40px);
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: pxTorem(20px);
          border-top: 1px solid #999999;

          .trend_unlock_li {
            width: pxTorem(280px);
            text-align: center;
            border: 1px solid #999999;
            padding: pxTorem(21px) 0;
            margin-bottom: pxTorem(40px);
            font-size: pxTorem(28px);
            border-radius: pxTorem(8px);
            position: relative;

            .recharge_money {
              .recharge_money_count {
                font-size: pxTorem(40px);
              }
            }

            .recharge_money_desc {
              color: #999999;
            }

            .rechargeMoneyDesc {
              color: #e98f36;
            }
          }

          .rechargeActive {
            background-color: #ffcc00;
          }

          .right_icon {
            position: absolute;
            top: 0;
            background-color: #e98f36;
            font-size: pxTorem(21px);
            padding: pxTorem(2px) pxTorem(6px);
            border-radius: pxTorem(6px);
            color: #ffffff;
          }

        }

        .input_recharge_money_warp {
          border-radius: pxTorem(4px);
          width: pxTorem(610px);
          margin: auto;
          border: 1px solid #999999;
          .input_recharge_money {
            border: none!important;
            outline: none!important;
            width: 100%;
            padding: pxTorem(4px) pxTorem(20px);
            font-size: pxTorem(32px);
          }
        }
        .recharge_warp{
          font-size: pxTorem(34px);
          padding: pxTorem(20px) pxTorem(36px);
          color: #e98f36;
        }
        .make_sure_recharge{
          width: pxTorem(650px);
          margin:pxTorem(20px) auto;
          height: pxTorem(80px);
          line-height: pxTorem(80px);
          text-align: center;
          font-size: pxTorem(34px);
          color: #ffffff;
          background-color: #e98f36;
          border-radius: pxTorem(8px);
        }
        .recharge_agree{
          width: pxTorem(400px);
          margin: pxTorem(10px) auto;
          font-size: pxTorem(28px);
          color: #666666;
          .recharge_agree_page{
            color: #999999;
          }
        }
      }
      .trend_unlock_warp3{
        padding: pxTorem(0px) pxTorem(30px);
        .trend_unlock_desc{
          font-size: pxTorem(30px);
          color: #666666;
          margin-bottom: pxTorem(30px);
        }
      }
      .fast_unlock{
        text-align: center;
        width: pxTorem(320px);
        height: pxTorem(80px);
        line-height: pxTorem(80px);
        background-color: #1296db;
        color: #ffffff;
        margin: pxTorem(100px) auto;
        border-radius: pxTorem(10px);
        font-size: pxTorem(34px);
      }
    }

  }
</style>
